<!--  SubForm 子表单展示模块 -->
<template>
  <div class="renderSubForm" :class="{ fx: fromDataes.length <= 5 }">
    <t-form-item
      v-for="item in fromDataes"
      v-show="
        !(
          item.data.isShow ||
          (!item.data.isShow && item.data.tripartiteType === 'hide')
        )
      "
      :key="item.id"
      :label-width="
        !item.data.isShowTitle ? (item.data.isMust ? '10px' : 0) : '100px'
      "
      :label="item.data.isShowTitle ? `${item.data.title}：` : ''"
      :name="`${item.id}`"
      :style="{ width: `${item.data.width ? item.data.width : 100}%` }"
    >
      <t-input
        v-if="item.type === 'input'"
        v-model="formData[`${item.id}`]"
        :placeholder="item.placeholder"
        :showLimitNumber="item.data.isStatistics"
        :defaultValue="item.defaultValue"
        :maxlength="Number(item.data.maxLength)"
        :minlength="Number(item.data.minLength)"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
      ></t-input>
      <!-- 多行文本 -->
      <t-textarea
        v-if="item.type === 'textArea'"
        v-model="formData[`${item.id}`]"
        :placeholder="item.placeholder"
        :maxcharacter="Number(item.data.maxLength)"
        :showLimitNumber="item.data.isStatistics"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
      />
      <!-- 单选 -->
      <t-radio-group
        v-if="item.type === 'radio'"
        v-model="formData[`${item.id}`]"
        :defaultValue="item.data.defaultValue"
        :style="{ display: 'flex', 'flex-direction': item.data.direction }"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
      >
        <t-radio
          v-for="it in item.data.titlab"
          :key="it"
          :label="it"
          :value="it"
        />
      </t-radio-group>
      <!-- 多选 -->
      <t-checkbox-group
        v-if="item.type === 'checkbox'"
        :value="formData[`${item.id}`] || []"
        :defaultValue="item.data.defaultValue || []"
        :style="{ display: 'flex', 'flex-direction': item.data.direction }"
        :max="Number(item.data.maxLength) || Infinity"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        @change="checkboxHandle"
        @click="checkboxClick(item)"
      >
        <t-checkbox
          v-for="(it, ind) in item.data.titlab"
          :key="ind"
          :label="it"
          :value="it"
        />
      </t-checkbox-group>
      <!-- 下拉框 -->
      <t-select
        v-if="item.type === 'select'"
        :value="formData[`${item.id}`]"
        placeholder="请选择"
        :multiple="item.data.maxLength > 1"
        :max="Number(item.data.maxLength) || 100"
        size="small"
        class="selectCont"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        @click="selectClick(item)"
        @change="defaultValueHandel"
      >
        <t-option
          v-for="it in item.data.titlab"
          :key="it"
          :label="it"
          :value="it"
        />
      </t-select>
      <!-- 开关 -->
      <t-switch
        v-if="item.type === 'switch'"
        v-model="formData[`${item.id}`]"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
      />
      <!-- 评分 -->
      <t-rate
        v-if="item.type === 'rate'"
        v-model="formData[`${item.id}`]"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        allowHalf
        size="20px"
      ></t-rate>
      <!-- 滑块 -->
      <t-slider
        v-if="item.type === 'slider'"
        v-model="formData[`${item.id}`]"
        :max="item.data.maxValue"
        :min="item.data.minValue"
        :step="item.data.step"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        size="small"
      />
      <!-- 日期选择器 -->
      <t-date-picker
        v-if="item.type === 'timeSelect'"
        v-model="formData[`${item.id}`]"
        :mode="
          item.data.dateType && item.data.dateType !== 'dateTime'
            ? item.data.dateType
            : 'date'
        "
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        :disableDate="disableDateHandle(item)"
        clearable
        :enable-time-picker="item.data.dateType === 'dateTime'"
      />
      <!-- 日期区间 -->
      <t-date-range-picker
        v-if="item.type === 'dateArea'"
        v-model="formData[`${item.id}`]"
        clearable
        size="small"
        :mode="
          item.data.dateType && item.data.dateType !== 'dateTime'
            ? item.data.dateType
            : 'date'
        "
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        :disableDate="dateAreadisableDateHandle(item)"
        :enable-time-picker="item.data.dateType === 'dateTime'"
      />
      <!-- 数字输入框 -->
      <t-input-number
        v-if="item.type === 'number'"
        v-model="formData[`${item.id}`]"
        :max="item.data.maxValue || Infinity"
        :min="item.data.minValue || -Infinity"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        placeholder="请输入默认值"
      >
        <template #label
          ><span>{{ item.data.prefix }}</span></template
        >
      </t-input-number>
      <!-- 附件 -->
      <t-upload
        v-if="item.type === 'file'"
        :action="fileUpUrl"
        size="small"
        :size-limit="{ size: item.data.fileSize || 1024 * 10, unit: 'KB' }"
        :max="item.data.maxFileNum || 99"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        @success="uploadSuccess"
      />
      <!-- 图片 -->
      <t-upload
        v-if="item.type === 'img'"
        :action="fileUpUrl"
        size="small"
        theme="image"
        :size-limit="{ size: item.data.fileSize || 1024 * 10, unit: 'KB' }"
        :max="item.data.maxFileNum || 99"
        :disabled="item.data.isReadOnly || item.data.tripartiteType === 'view'"
        @success="uploadSuccess"
      />
      <!-- 位置 -->
      <div v-if="item.type === 'position'" style="width: 100%">
        <div style="padding: 10px 10px 20px 0">
          地址: 获取失败 , 经纬度: {{ posLnglat }}
        </div>
        <div
          v-if="item.type === 'position'"
          id="mapContainer"
          ref="mapNode"
          style="height: 10vh; width: 100%; min-height: 300px"
        ></div>
      </div>
      <!---子表单-->
      <div
        v-if="item.type === 'subform' && item.data.formData.length != 0"
        class="subformItem"
      >
        <div
          v-for="(it, i) in subList"
          :key="it"
          :class="{ item: true, fx: item.data.formData.length <= 5 }"
        >
          <span v-if="i === 0" class="add" @click="subformAct()">+</span>
          <span v-else class="red" @click="subformAct(i)">-</span>
          <subRenderForm
            :id="item.id"
            :dataKey="it"
            :fromDataes="item.data.formData"
            @valueChange="subfromValue"
          />
        </div>
      </div>
      <!-- 省市区 -->
      <!-- 分割线 -->
      <!-- 按钮 -->
      <!-- 部门 -->
      <!-- 人员 -->
    </t-form-item>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { useFormData } from '@/store'
import { formDataes } from '@/api/form'

const props = defineProps({
  id: Number,
  fromDataes: Object,
  dataKey: Number,
  initData: Object
})

const emit: Function = defineEmits(['valueChange'])

const store = useFormData()
// 禁用日期 - 日期选择
const disableDateHandle = (item) => {
  const data = {
    before: item.data.minValue,
    after: item.data.maxValue
  }
  for (const key in data) {
    if (!data[key]) {
      data[key] = undefined
    }
  }
  return JSON.parse(JSON.stringify(data))
}
// 禁用日期 - 日期区间 - 时间区间如果是周的话 需要把禁用的日期处理一下
const dateAreadisableDateHandle = (item) => {
  const data = {
    before:
      item.data.dateType === 'week'
        ? item.data.disableDaySt
        : item.data.minValue,
    after:
      item.data.dateType === 'week'
        ? item.data.disableDayLt
        : item.data.maxValue
  }
  for (const key in data) {
    if (!data[key]) {
      data[key] = undefined
    }
  }
  return JSON.parse(JSON.stringify(data))
}
// 动态渲染表单的 数据 - 来源于设计表单的数据
const BaseFormData = ref()
const renderFormData = ref()
const formValidatorStatus = ref()
const openType = ref('preview') // 'render' 表单正常使用模式,  'preview' 预览模式 不走接口
const formId = ref('') // 表单ID
const dataId = ref('') // 表单的初始数据ID - 编辑用的
const configBaseData = ref() // 传入的数据
// 获取APP根实例
const instance = getCurrentInstance()

const fileUpUrl = ref('')
// 初始化渲染表单
onMounted(() => {
  // 被输入接入系统的
  // const instances: any = instance.appContext.app
  // console.log('配置参数::', instances.$initConfig)
  // if (instances.$initConfig) {
  //   const { type, baseData, uploadUrl } = instances.$initConfig
  //   formId.value = baseData.formId
  //   dataId.value = baseData.dataId
  //   fileUpUrl.value = uploadUrl
  //   configBaseData.value = baseData
  //   if (props.preview) {
  //     openType.value = 'preview'
  //   } else if (type) {
  //     openType.value = type
  //   }
  // }
  // initDataHandle()
  // initMap()
  console.log('子表的初始数据::', props.initData)
  if (props.initData) {
    formData.value = props.initData[props.dataKey]
  }
})

const map = ref()
const posLnglat = ref()
const initMap = () => {
  AMapLoader.load({
    key: 'b5631874991abcac8b68f2b0e24a0854', // 申请好的Web端开发者Key，首次调用 load 时必填
    plugins: [
      'AMap.ToolBar', //工具条
      'AMap.Scale', // 比例尺
      'AMap.Geolocation', // 定位
      'AMap.PlaceSearch',
      'AMap.Geocoder'
    ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map.value = new AMap.Map('mapContainer', {
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        zoom: 11,
        pitch: 80,
        expandZoomRange: true,
        zooms: [3, 20],
        center: [116.397428, 39.90923] // 初始化地图中心点位置
      })
      map.value.on('click', (e) => {
        const lng = e.lnglat.lng
        const lat = e.lnglat.lat
        const lnglat = [lng, lat]
        posLnglat.value = lnglat
      })
    })
    .catch((e) => {
      console.log(e)
    })
}
// 图片上传成功
const uploadSuccess = (val) => {
  console.log('图片上传成功', val)
  // attributeset.data.defaultValue = val.response.url
}
// 初始化的表单数据
const initDataHandle = () => {
  if (openType.value === 'preview') {
    // 使用 pinia 的缓存数据 这个后面做预览使用
    const storeData = (store.getSubmitFormData as any).palyload
    if (
      storeData &&
      Object.keys(storeData.formDetail.formData[0].data).length > 0
    ) {
      BaseFormData.value = storeData.formDetail.baseFormData // data.baseFormData
      renderFormData.value = storeData.formDetail.formData[0].data //
      formDataInit()
    }
  } else {
    // 初始化数据 - 使用接口数据 - 表单结构初始化
    getFromDataDetails()
    // 表单数据初始化 - 数据获取
    getFromDataes()
  }
}

// 下拉的处理 -- start
// 暂存下拉点击选项
const selectItem = ref()
const selectClick = (item) => {
  selectItem.value = item
}
// 选择默认值  这里有两种模式 一种 正常单选下拉 一种多选标签式的
const defaultValueHandel = (val, context) => {
  if (!val) return
  // 多选
  if (
    selectItem.value.data.maxLength !== undefined &&
    Number(selectItem.value.data.maxLength) > 1 &&
    context.trigger === 'check'
  ) {
    selectHandle(val, { current: context.option.value })
  } else {
    formData.value[`${selectItem.value.id}`] = val
  }
}
// 互斥选项处理 - 多选
const selectHandle = (val, context) => {
  const item = selectItem.value
  // 选中
  if (item.data.excludeOptions && item.data.excludeOptions.length > 0) {
    const ind = item.data.excludeOptions.indexOf(context.current)
    // 如果有互斥项已经被选 做标记
    const valInd = formData.value[`${item.id}`].indexOf(context.current)
    // 已经选择了一个互斥项
    if (
      Array.isArray(formData.value[`${item.id}`]) &&
      formData.value[`${item.id}`].length === 1 &&
      item.data.excludeOptions.indexOf(formData.value[`${item.id}`][0]) !== -1
    ) {
      formData.value[`${item.id}`] = [context.current]
      return
    }
    // 互斥项处理 - 互斥选项中没有并且也没有被选中过
    if (ind === -1 && valInd === -1) {
      if (
        Array.isArray(formData.value[`${item.id}`]) &&
        formData.value[`${item.id}`].length === 0
      ) {
        formData.value[`${item.id}`] = [context.current]
      } else {
        formData.value[`${item.id}`].push(context.current)
      }
      // 在互斥选项中有并且已经被选中直接清空
    } else if (ind !== -1 && valInd !== -1) {
      formData.value[`${item.id}`] = []
      // 在互斥选项中有并且没有被选中 直接选中
    } else if (ind !== -1 && valInd === -1) {
      formData.value[`${item.id}`] = [context.current]
    }
  } else {
    formData.value[`${item.id}`] = val
  }
}
// 下拉的处理 -- end

// 子表
const subList = ref([0])
const subformAct = (num?: number) => {
  if (num) {
    subList.value.splice(num, 1)
  } else {
    subList.value.push(subList.value.at(-1) + 1)
  }
}
const subformData = ref([])
// 接收子表参数
const subfromValue = (val) => {
  if (subformData.value.length === 0) {
    subformData.value.push(val)
  } else {
    const ind = subformData.value.findIndex((n) => {
      return n.datakey === val.datakey
    })
    if (ind === -1) {
      subformData.value.push(val)
    } else {
      subformData.value.splice(ind, 1, val)
    }
  }
  formData.value[`${val.id}`] = formatData(subformData.value)
}

const formatData = (val) => {
  let data = []
  if (val && Array.isArray(val)) {
    data = val.map((n) => n.data)
  }
  return data
}

// 获取表单控件的详情
const getFromDataDetails = async () => {
  const id = formId.value
  const params = {
    id: 'GET_MY_FORM',
    messageAuth: {
      tenant: 'tenant_hiss',
      currentUser: {
        userId: '1',
        userName: '张三',
        userGroups: ''
      }
    },
    palyload: {
      ids: id,
      query: ''
    }
  }
  await formDataes(params).then((res) => {
    const resData = res.data.res
    const context = JSON.parse(resData[0].context)
    BaseFormData.value = context.baseFormData
    const data = context.formData[0].data
    // 和三方（流程）的配置信息进行融合  edit：可编辑 view：不可编辑 hide：不显示
    if (Object.keys(configBaseData.value).length > 0) {
      const { fields } = configBaseData.value.formConfig
      for (const key in data) {
        for (const it in fields) {
          if (String(data[key].id) === String(fields[it].fieldName)) {
            data[key].data.tripartiteType = fields[it].type
          }
        }
      }
    }
    renderFormData.value = data
  })
}

// 表单数据
const formData = ref({})
// 暂存多选点击选项
const changeItem = ref()
const checkboxClick = (item) => {
  changeItem.value = item
}
// 互斥选项处理 - 多选
const checkboxHandle = (val, context) => {
  const item = changeItem.value
  if (!Array.isArray(formData.value[`${item.id}`])) {
    formData.value[`${item.id}`] = []
  }
  const itData = formData.value[`${item.id}`]
  // 取消选项
  const ckInd = Array.isArray(itData) ? itData.indexOf(context.current) : -1
  if (ckInd !== -1) {
    formData.value[`${item.id}`].splice(ckInd, 1)
    return
  }
  // 选中
  if (item.data.excludeOptions && item.data.excludeOptions.length > 0) {
    const ind = item.data.excludeOptions.indexOf(context.current)
    // 如果有互斥项已经被选 做标记
    const valInd = itData.indexOf(context.current)
    // 已经选择了一个互斥项
    if (
      Array.isArray(itData) &&
      itData.length === 1 &&
      item.data.excludeOptions.indexOf(itData[0]) !== -1
    ) {
      formData.value[`${item.id}`] = [context.current]
      return
    }
    // 互斥项处理 - 互斥选项中没有并且也没有被选中过
    if (ind === -1 && valInd === -1) {
      if (Array.isArray(itData) && itData.length === 0) {
        formData.value[`${item.id}`] = [context.current]
      } else {
        formData.value[`${item.id}`].push(context.current)
      }
      // 在互斥选项中有并且已经被选中直接清空
    } else if (ind !== -1 && valInd !== -1) {
      formData.value[`${item.id}`] = []
      // 在互斥选项中有并且没有被选中 直接选中
    } else if (ind !== -1 && valInd === -1) {
      formData.value[`${item.id}`] = [context.current]
    }
  } else {
    formData.value[`${item.id}`] = val
  }
}

// 默认值处理 - 如果是checkbox 需要提前处理checkbox
const formDataInit = (value?: Object) => {
  let baseFormData = {}
  if (renderFormData.value) {
    renderFormData.value.forEach((item) => {
      if (item.type === 'checkbox' || item.type === 'dateArea') {
        baseFormData[`${item.id}`] = []
      }
      if (
        item.data.defaultValue !== '' &&
        item.data.defaultValue !== undefined
      ) {
        baseFormData[`${item.id}`] = item.data.defaultValue
      }
    })
  }
  if (value) {
    baseFormData = { ...baseFormData, ...value }
  }
  formData.value = baseFormData
}

// 获取表单数据-表单的初始数据
const getFromDataes = () => {
  const dom = formValidatorStatus.value
  if (dom.validate()) {
    const params = {
      id: 'GET_MY_FORM_DATA',
      messageAuth: {
        tenant: 'tenant_hiss',
        currentUser: {
          userId: '1',
          userName: '张三',
          userGroups: ''
        }
      },
      palyload: {
        modelId: configBaseData.value.modelId, // 流程 ID 'dc0af849c7f98019a6918debe03fcf56'
        formId: configBaseData.value.formId, // 表单ID
        dataId: configBaseData.value.dataId || dataId.value // 数据ID
      }
    }
    if (!params.palyload.dataId) {
      return
    }
    formDataes(params).then((res) => {
      // 默认值的处理
      if (
        res.code === 200 &&
        res.data.result &&
        Object.keys(res.data.result).length > 0
      ) {
        formDataInit(res.data.result)
      } else {
        formDataInit()
      }
    })
  }
}
watch(
  () => formData,
  (val) => {
    emit('valueChange', {
      id: props.id,
      datakey: props.dataKey,
      data: val.value
    })
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.renderSubForm {
  margin: 0 auto;
  margin-left: 20px;
  margin-bottom: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: #fff;
  &:last-child {
    border: none;
  }
  .t-form {
    width: 100%;
  }
  .title {
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 30px;
  }

  .formCont {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
<style lang="less">
.renderFormCont .t-form__controls-content {
  display: block;
}
.renderFormCont .t-form__controls .t-form__item {
  flex: 1;
  margin-bottom: 15px;
}
</style>
